<!--
 * @Author: wjk
 * @Date: 2019-12-31 15:40:51
 * @LastEditors: wjk
 * @LastEditTime: 2019-12-31 15:51:20
 * @description: file content
 -->
<template>
  <base-page-view class-name="page-container userInfo">
    <view class="sLine_box">
      <view class="sLine">
        <view class="lCont">头像</view>
        <view class="rCont" @click="uploadImage">
          <image :src="userData.head_img?userData.head_img:'/static/images/mine/touxiang.png'" alt="" class="img_photo" />
          <image src="/static/images/mine/list_more.png" alt="" class="icon_my_more" />
        </view>
      </view>
      <view class="sLine" @click="$navigateTo('/pagesMine/phone/index?type=modify')">
        <view class="lCont">手机号码</view>
        <view class="rCont">
          <span class="tit">{{ userData.mobile }}</span>
          <image src="/static/images/mine/list_more.png" alt="" class="icon_my_more" />
        </view>
      </view>
      <view class="sLine" @click="$navigateTo('/pagesMine/user-info/nick?nike='+encodeURIComponent(JSON.stringify(userData.nickname)))">
        <view class="lCont">昵称</view>
        <view class="rCont">
          <span class="tit">{{ userData.nickname }}</span>
          <image src="/static/images/mine/list_more.png" alt="" class="icon_my_more" />
        </view>
      </view>
      <view class="sLine">
        <view class="lCont">性别</view>
        <view class="rCont">
          <picker :value="index" :range="sexList" @change="bindPickerChange">
            <view class="uni-input">{{ sexList[index] }}</view>
          </picker>
          <image src="/static/images/mine/list_more.png" alt="" class="icon_my_more" />
        </view>
      </view>
      <view class="sLine">
        <view class="lCont">出生日期</view>
        <view class="rCont">
          <picker mode="date" :value="birthday" :start="startDate" :end="endDate" @change="bindDateChange">
            <view class="uni-input">{{ birthday }}</view>
          </picker>
          <image src="/static/images/mine/list_more.png" alt="" class="icon_my_more" />
        </view>
      </view>
      <view class="sLine no-bord" @tap="toggleTab()">
        <view class="lCont">所在地区</view>
        <view class="rCont">
          <span class="uni-input">{{ addressData.province ? addressData.province+' '+addressData.city : '请选择您所在的城市地址' }}</span>
          <image src="/static/images/mine/list_more.png" alt="" class="icon_my_more" />
        </view>
      </view>
      <address-picker
        :show="showAddressPicker"
        key-str="name"
        :default-data="[addressData.province,addressData.city]"
        @close="showAddressPicker = false"
        @confirm="onConfirm" />
    </view>
    <view class="sLine_box">
      <view class="sLine" @click="$navigateTo('/pagesMine/user-info/sign?sign='+encodeURIComponent(JSON.stringify(userData.signature)))">
        <view class="lCont">个性签名</view>
        <view class="rCont">
          <span class="tit2">{{ userData.signature || '去填写' }}</span>
          <image src="/static/images/mine/list_more.png" alt="" class="icon_my_more" />
        </view>
      </view>
      <view class="sLine no-bord" @click="$navigateTo('/pagesMine/user-info/other')">
        <view class="lCont">其他</view>
        <view class="rCont">
          <image src="/static/images/mine/list_more.png" alt="" class="icon_my_more" />
        </view>
      </view>
    </view>
  </base-page-view>
</template>

<script>
import { filters } from '@/utils/tools.js'
import addressPicker from '../address/address-picker/index.vue'
import './index.scss'
export default {
  components: {
    addressPicker
  },
  data() {
    return {
      userData: {},
      index: 0,
      sexList: ['男', '女', '保密'],
      birthday: '未设置',
      showAddressPicker: false,
      addressData: {
        province: '',
        city: ''
      },
      head_img: ''
    }
  },
  computed: {
    startDate() {
      return this.getDate('start')
    },
    endDate() {
      return this.getDate('end')
    }
  },
  created() {
  },
  onLoad() {

  },
  onShow() {
    this.$api.mineApi.getMyInfo({ hideLoading: true }).then((res) => {
      this.userData = res.data
      switch (res.data.sex) {
        case 1:
          this.index = 0
          break
        case 2:
          this.index = 1
          break
        default:
          this.index = 2
          break
      }
      if (res.data.birthday) {
        this.birthday = filters.parseTime(res.data.birthday * 1000, '{y}-{m}-{d}')
      }
      if (this.userData.province && this.userData.city) {
        this.addressData.province = this.userData.province
        this.addressData.city = this.userData.city
      }
      console.log(this.addressData)
    })
  },
  methods: {
    async uploadImage() {
      const data = await this.$api.commonApi.uploadImg({ count: 1 })
      if (data.success) {
        this.userData.head_img = data.url[0].url
        this.$api.mineApi.setMyInfo({
          head_img: this.userData.head_img,
          hideLoading: true
        })
      }
    },
    toggleTab() {
      this.showAddressPicker = true
    },
    bindPickerChange: function(e) {
      // console.log('picker发送选择改变，携带值为', e.target.value)
      this.index = Number(e.target.value)
      var sexType = 0
      switch (this.index) {
        case 0:
          sexType = 1
          break
        case 1:
          sexType = 2
          break
        default:
          sexType = 0
          break
      }
      this.$api.mineApi.setMyInfo({
        sex: sexType,
        hideLoading: true
      })
    },
    bindDateChange: function(e) {
      this.birthday = filters.parseTime(new Date(e.target.value).getTime(), '{y}-{m}-{d}')
      this.$api.mineApi.setMyInfo({
        birthday: new Date(e.target.value).getTime() / 1000,
        hideLoading: true
      })
    },
    getDate(type) {
      const date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()

      if (type === 'start') {
        year = year - 60
      } else if (type === 'end') {
        year = year + 2
      }
      month = month > 9 ? month : '0' + month
      day = day > 9 ? day : '0' + day
      return `${year}-${month}-${day}`
    },
    async onConfirm(data) {
      this.addressData.province = data[0].name
      this.addressData.city = data[1].name
      const res = await this.$api.mineApi.setMyInfo({
        province: data[0].name,
        city: data[1].name,
        country: '中国',
        hideLoading: true
      })
      if (res.success) {
        this.showAddressPicker = false
        uni.showToast({
          title: '修改成功',
          icon: 'none'
        })
      }
    }
  }
}
</script>
